<template>
  <el-table :data="attaches" class="custom-table thead-bg-color">
    <el-table-column label="附件名" prop="title">
      <div slot-scope="{ row }" class="line1" :title="row.title">{{ row.title }}</div>
    </el-table-column>
    <el-table-column label="上传者" width="140">
      <div
        slot-scope="{ row }"
        class="line1"
        :title="row.author.nickname"
        v-text="row.author.nickname"
      />
    </el-table-column>
    <el-table-column label="上传时间" width="100" align="center">
      <timeago2 slot-scope="{ row }" :date-time="row.created_at" format-as="date" />
    </el-table-column>
    <el-table-column label="附件大小" prop="sized" width="100" align="center" />
    <el-table-column label="下载次数" prop="downloadCount" width="80" align="center" />
    <el-table-column label="操作" width="80" align="center">
      <template slot-scope="scope">
        <el-link type="success" @click="preview(scope.row)" title="将会打开新页面，此功能可能被浏览器拦截">预览</el-link>
        <el-link type="primary" @click="download(scope.row)">下载</el-link>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'AttachesList', // 资源里的附件列表
  props: {
    attaches: { // 附件列表数据
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      pdfVisible: false,
      pdfSrc: '',
    };
  },
  methods: {
    // 下载附件
    download(attach) {
      this.$api.other.download({ key: attach.key, docId: attach.parentId, curFileId: attach.id })
        .then((res) => {
          window.open(`${res.data.ufile}?attname=${attach.title}`, '_self');
        })
        .catch(() => {});
    },
    preview(attach) {
      const fileUrl = `https://file.learnerhub.net/${attach.key}`;
      this.$api.other.getYozoPreview({ url: fileUrl })
        .then((res) => {
          if (res.data.data) window.open(res.data.data, '_blank');
          else this.$message.warning('当前文件类型不支持预览');
        })
        .catch(() => {});
    },
  },
};
</script>

<style></style>
